<template>
	<view class="custom_upload_wrap">
		<!-- 上传图片 -->
		<view class="upload_image" v-if="accept == 'image'">
			<view class="file_list" v-for="(item,index) in modelValue" :key="index">
				<image :src="item.url" class="image" @click="handlePreviewImage(index)"></image>
				<view class="close" @click="handleClose(index)" v-if="delete">
					<image src="/static/common/delete.png"></image>
				</view>
			</view>
			<view class="upload_icon" @click="handleUpload" v-if="modelValue.length < maxCount && !disabled ">
				<image src="/static/common/upload_add1.png" mode="widthFix"></image>
				<text>选择图片</text>
			</view>
		</view>
		<!-- 上传视频 -->
		<view class="upload_video" v-if="accept == 'video'">
			<view class="file_list" v-for="(item,index) in modelValue" :key="index">
				<image :src="item.thumb" class="image" @click="handlePreviewVideo(index)" v-if="item.thumb"></image>
				<view class="default" @click="handlePreviewVideo(index)" v-else></view>
				<view class="close" @click="handleCloseVideo(index)" v-if="delete">
					<image src="/static/common/delete.png"></image>
				</view>
				<view class="play" @click="handlePreviewVideo(index)">
					<image src="/static/common/play.png" mode=""></image>
				</view>
			</view>
			<view class="upload_icon" @click="handleUploadVideo" v-if="modelValue.length < maxCount && !disabled ">
				<image src="/static/common/upload_add1.png" mode="widthFix"></image>
				<text>选择视频</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,defineComponent,defineProps,defineEmits } from 'vue';
	
	defineComponent({
		name:'custom-upload'
	})
	
	const props = defineProps({
		modelValue: {
			type: Array,
			default:()=>{
				return []
			}
		},
		accept:{
			type:String,
			default:()=>{
				return 'image'
			}
		},
		delete:{
			type:Boolean,
			default:()=>{
				return true
			}
		},
		maxCount:{
			type:Number,
			default:()=>{
				return 9
			}
		},
		disabled:{
			type:Boolean,
			default:()=>{
				return false
			}
		}
	})
	
	
	// const fileList = ref([])
	const emit = defineEmits(['update:modelValue']);
	
	/**
	 *  图片上传
	 */
	// 上传图片
	const handleUpload = ()=>{
		uni.chooseMedia({
			count:props.maxCount || 9,
			mediaType:['image'],
			success:(res)=>{
				console.log(res)
				const { tempFiles } = res
				tempFiles.forEach((item,index)=>{
					// fileList.value.push({
					// 	...item,
					// 	url:item.tempFilePath
					// })
					props.modelValue.push({
						...item,
						url:item.tempFilePath
					})
				})
				emit('update:modelValue',props.modelValue)
			}
		})
	}
	// 删除图片
	const handleClose = (index)=>{
		// fileList.value.splice(index,1)
		props.modelValue.splice(index,1)
		emit('update:modelValue',props.modelValue)
	}
	// 预览图片
	const handlePreviewImage = (index)=>{
		uni.previewImage({
			current:index,
			// urls:fileList.value.map(item=>item.url)
			urls:props.modelValue.map(item=>item.url)
		})
	}
	
	
	/**
	 *  视频上传
	 */
	// 上传视频
	const handleUploadVideo = ()=>{
		uni.chooseVideo({
			success:async(res)=>{
				console.log(res)
				const { tempFilePath,thumbTempFilePath } = res
				// fileList.value.push({
				// 	tempFilePath,
				// 	thumbTempFilePath,
				// 	url:tempFilePath,
				// 	thumb:thumbTempFilePath,
				// 	type:'video'
				// })
				props.modelValue.push({
					tempFilePath,
					thumbTempFilePath,
					url:tempFilePath,
					thumb:thumbTempFilePath,
					type:'video'
				})
				emit('update:modelValue',props.modelValue)
			}
		})
	}
	// 删除视频
	const handleCloseVideo = (index)=>{
		// fileList.value.splice(index,1)
		props.modelValue.splice(index,1)
		emit('update:modelValue',props.modelValue)
	}
	// 预览视频
	const handlePreviewVideo = (index)=>{
		// #ifdef MP-WEIXIN
		wx.previewMedia({
			current:index,
			sources:props.modelValue
		})
		// #endif
	}
</script>

<style lang="scss">
	.custom_upload_wrap{
		.upload_image,.upload_video{
			display: flex;
			flex-wrap: wrap;
		}
		.file_list{
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			.image{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
			.default{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				background: black;
			}
			.close{
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: -14rpx;
				right: -14rpx;
			}
			.play{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -30rpx;
				margin-top: -30rpx;
			}
		}
		.upload_icon{
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
			// border: 2rpx solid #CCCCCC;
			border: 2rpx solid #F7F7F7;
			background-color: #F7F7F7;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			image{
				width: 36rpx;
				height: 36rpx;
			}
			text{
				font-size: 24rpx;
				color: #666666;
				padding-top: 20rpx;
			}
		}
	}
</style>